<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>山西万鸿科技有限公司项目进度展示板</title>
        <link href="./css/elementUi.css" rel="stylesheet" />
        <link href="./css/swiper.min.css" rel="stylesheet" />
        <link href="./css/index.css" rel="stylesheet" />
        <script src="./js/vue@2.6.js"></script>
        <!--  引入ElementUI组件 -->
        <script src="./js/element-ui.js"></script>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- jq -->
        <script src="./js/jquery.min.js"></script>
        <!-- 转换日期 -->
        <script src="./js/dayjs.min.js"></script>
        <!-- echarts -->
        <script src="./js/echarts.min.js"></script>
        <!-- swiper -->
        <script src="./js/swiper.min.js"></script>
    </head>

    <body>
        <div class="main_jd" id="main_jd">
            <div class="title_wh" @click="fullScreen">
                <div class="title_tp">
                    <img src="./image/top_02.png" alt="" />
                </div>
                <div class="dateTime">
                    <div class="date-value">
                        <span class="date">{{ date }}</span>
                        <span class="time">{{ time }}</span>
                    </div>
                </div>
            </div>
            <div class="wh_table">
                <el-table
                    ref="rolltable"
                    :data="tableData"
                    style="width: 100%"
                    @mouseenter.native="stopScroll"
                    @mouseleave.native="startScroll"
                    :header-cell-style="{color:'#fff',background:'#104E95'}"
                    :height="'90%'"
                    :row-class-name="tabRowClassName"
                >
                    <el-table-column
                        label=""
                        width="70"
                        align="center"
                        header-align="left"
                    >
                        <template slot-scope="scope">
                            <div class="pName_icon">
                                <img src="./image/xh.png" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="pName"
                        label="项目名称"
                        width="120"
                        align="left"
                        header-align="left"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="pLeader"
                        label="项目负责人"
                        width="100"
                        align="left"
                        header-align="left"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="任务名称"
                        align="left"
                        header-align="left"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="leader"
                        label="任务负责人"
                        width="180"
                        align="left"
                        header-align="left"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="beginTime"
                        label="实施开始日期"
                        width="140"
                        align="left"
                        header-align="left"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="endTime"
                        label="实施结束日期"
                        width="140"
                        align="left"
                        header-align="left"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="duration"
                        label="工期(日)占比"
                        width="300"
                        align="center"
                        header-align="left"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.durationRatio<0">
                                <div class="date_tip">
                                    <span class="gq_wh"
                                        >工期： {{scope.row.duration}}</span
                                    >
                                    <span class="sygq_wh" style="color: #ff0101"
                                        >超过工期：
                                        {{Math.abs(Number(scope.row.remainingDuration))}}</span
                                    >
                                </div>
                                <el-progress
                                    :stroke-width="12"
                                    :percentage="scope.row.durationRatio<0?100:scope.row.durationRatio"
                                    color="#FF0101"
                                    :show-text="false"
                                >
                                </el-progress>
                            </div>
                            <div v-else-if="scope.row.durationRatio>50">
                                <div class="date_tip">
                                    <span class="gq_wh"
                                        >工期： {{scope.row.duration}}</span
                                    >
                                    <span class="sygq_wh" style="color: #ff6318"
                                        >剩余工期：
                                        {{scope.row.remainingDuration}}</span
                                    >
                                </div>
                                <el-progress
                                    :stroke-width="12"
                                    :percentage="scope.row.durationRatio"
                                    color="#FF6318"
                                    :show-text="false"
                                >
                                </el-progress>
                            </div>
                            <div
                                v-else-if="scope.row.durationRatio>=0 && scope.row.durationRatio<=50 "
                            >
                                <div class="date_tip">
                                    <span class="gq_wh"
                                        >工期： {{scope.row.duration}}</span
                                    >
                                    <span class="sygq_wh" style="color: #01deb0"
                                        >剩余工期：
                                        {{scope.row.remainingDuration}}</span
                                    >
                                </div>
                                <el-progress
                                    :stroke-width="12"
                                    :percentage="scope.row.durationRatio"
                                    color="#01DEB0"
                                    :show-text="false"
                                >
                                </el-progress>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </body>
    <script>
        // const dayjs = require("dayjs");
        var vm = new Vue({
            el: '#main_jd',
            data: function () {
                return {
                    ts: '',
                    date: '',
                    time: '',
                    rolltimer: null,
                    timer: '',
                    urls: 'http://192.168.0.19:8011', //接口地址
                    tableData: [],
                    ws: 'ws://192.168.0.19:8011/ws', //websocket地址
                    reconnectCount: 0, //计算重新连接了几次
                    maxReconnectAttempts: 10, //设置重新连接数量
                    seconds: 5000, //每次连接毫秒数
                    lockReconnect: false //避免重复连接
                }
            },
            methods: {
                tabRowClassName(row) {
                    if (row.rowIndex % 2 == 0) {
                        return 'row1'
                    } else {
                        return 'row2'
                    }
                },
                ProgressBar() {
                    // 创建一个 ECharts 实例
                    var myChart = echarts.init(
                        document.getElementById('progress-bar')
                    )
                    // 配置进度条的选项
                    var option = {
                        grid: {
                            left: '5%',
                            top: '0',
                            right: '0',
                            bottom: '0',
                            containLabel: true,
                            width: '93%'
                        },
                        xAxis: {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'category',
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                color: 'black',
                                fontSize: 17
                            }
                        },
                        series: [
                            {
                                name: '/' + 100,
                                type: 'bar',
                                barWidth: 18,
                                data: [100],
                                label: {
                                    show: true,
                                    //position    : 'middle',
                                    offset: [20, 2],
                                    formatter: '{c}{a}',
                                    color: '#fff',
                                    fontSize: 15
                                },
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        1,
                                        0,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: '#A4DF4E'
                                            }, //柱图渐变色
                                            // {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                                            {
                                                offset: 1,
                                                color: '#5DC69D'
                                            } //柱图渐变色
                                        ]
                                    ),
                                    barBorderRadius: 3
                                },
                                zlevel: 1
                            },
                            {
                                name: '进度条背景',
                                type: 'bar',
                                barGap: '-100%',
                                barWidth: 18,
                                data: [100],
                                color: 'red', //柱条颜色
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 3,
                                        borderColor: '#FEFEFE'
                                    }
                                }
                            }
                        ]
                    }

                    // 使用刚指定的配置项和数据显示图表
                    myChart.setOption(option)
                },
                createWebSocket() {
                    try {
                        // 创建Web Socket 连接
                        socket = new WebSocket(this.ws)
                        // 初始化事件
                        this.initEventHandle(socket)
                    } catch (e) {
                        //     // 出错时重新连接
                        console.log('error', e)
                        //       // 创建Web Socket 连接
                        //       socket = new WebSocket(this.ws)
                        //     // 初始化事件
                        //     this.initEventHandle(socket)
                    }
                },
                initEventHandle(socket) {
                    // 连接关闭时触发
                    socket.onclose = () => {
                        console.log('连接关闭')
                        this.reconnect() //重新连接
                    }
                    // 通信发生错误时触发
                    socket.onerror = () => {
                        // 重新创建长连接
                        console.log('通信发生错误')
                        this.reconnect() //重新连接
                    }
                    // 连接建立时触发
                    socket.onopen = () => {
                        console.log('建立连接成功')
                        // 成功后重置为0
                        this.reconnectCount = 0
                    }
                    // 客户端接收服务端数据时触发
                    socket.onmessage = msg => {
                        console.log(msg)
                        this.getalltask()
                        // let data = JSON.parse(msg.data);
                        // this.$emit("getSockData", data);
                    }
                },
                reconnect() {
                    console.log('重新连接')
                    let tt;
                    if (this.lockReconnect) {
                        return
                    }
                    this.lockReconnect = true
                    tt && clearTimeout(tt)
                    tt = setTimeout(() => {
                        this.reconnectCount++
                        this.createWebSocket() // 尝试重新连接
                        this.lockReconnect = false
                    }, this.seconds)
                    // if (this.reconnectCount < this.maxReconnectAttempts) {

                    // } else {
                    //     console.log(
                    //         `WebSocket连接失败, 已超过最大重连次数${this.reconnectCount}次`
                    //     )
                    // }
                },
                test(data) {
                    // 给服务器发送一个字符串:
                    socket.send(data)
                },
                dayzero(day) {
                    if (day < 10) {
                        return '0' + day
                    }
                    return day
                },
                displayDate() {
                    let today = new Date()
                    let year = today.getFullYear()
                    let month = today.getMonth() + 1
                    let day = today.getDate()
                    let weekDay = today.getDay()
                    let hour = today.getHours()
                    let minute = today.getMinutes()
                    let second = today.getSeconds()
                    let weekDays = [
                        '星期日',
                        '星期一',
                        '星期二',
                        '星期三',
                        '星期四',
                        '星期五',
                        '星期六'
                    ]
                    let date =
                        year +
                        '年' +
                        this.dayzero(month) +
                        '月' +
                        this.dayzero(day) +
                        '日' +
                        weekDays[weekDay]
                    let time =
                        this.dayzero(hour) +
                        ':' +
                        this.dayzero(minute) +
                        ':' +
                        this.dayzero(second)
                    this.date = date
                    this.time = time
                    // document.getElementById("dateDisplay").innerHTML = date;
                },
                startScroll(e) {
                    e.stopPropagation()
                    this.tableScroll(e)
                },
                //停止滚动移入
                stopScroll() {
                    window.clearInterval(this.rolltimer)
                    window.clearTimeout(this.timer)
                },
                tableScroll() {
                    const table = this.$refs.rolltable
                    const divData = table.bodyWrapper
                    var e = e || window.event

                    window.clearTimeout(this.timer)
                    window.clearInterval(this.rolltimer)
                    this.rolltimer = window.setInterval(() => {
                        divData.scrollTop += 1
                        if (
                            divData.clientHeight + divData.scrollTop + 1 >
                            divData.scrollHeight
                        ) {
                            window.clearInterval(this.rolltimer)
                            if (table.tableData.length > 5) {
                                window.clearInterval(this.rolltimer)
                                this.timer = window.setTimeout(() => {
                                    divData.scrollTop = 0
                                    window.clearTimeout(this.timer)
                                    this.tableScroll()
                                }, 4000)
                            }
                        }
                    }, 40)
                },
                // taskStatus({
                //     row,
                //     column,
                //     rowIndex,
                //     columnIndex
                // }) {
                //     if (row.remainingDuration < 0 && column.label == '剩余工期(日)') {
                //         return 'background:#FF0000;color:#fff'
                //     } else if (row.remainingDuration >= 5 && column.label == '剩余工期(日)') {
                //         return 'background:#00B050;color:#fff'
                //     } else if (row.remainingDuration < 5 && column.label == '剩余工期(日)') {
                //         return 'background:#FF7433;color:#fff'
                //     }
                //     // console.log(row.status == 0)
                // },
                getalltask() {
                    let vm = this
                    $.ajax({
                        url: this.urls + '/alltask',
                        data: {
                            // action: "jQueryAjax"
                        },
                        type: 'GET',
                        success: function (data) {
                            if (data.length > 0) {
                                data.forEach(item => {
                                    item.endTime = item.endTime
                                        ? dayjs(item.endTime).format(
                                              'YYYY年MM月DD日'
                                          )
                                        : '-'
                                    item.beginTime = item.beginTime
                                        ? dayjs(item.beginTime).format(
                                              'YYYY年MM月DD日'
                                          )
                                        : '-'
                                    item.durationRatio =
                                        (Number(item.remainingDuration) /
                                            Number(item.duration)) *
                                        100
                                    if (item.durationRatio > 0) {
                                        item.durationRatio =
                                            100 - item.durationRatio
                                    }
                                })
                                vm.tableData = data
                            }
                        },
                        dataType: 'json'
                    })
                },

                fullScreen() {
                    var element = document.documentElement
                    // 进入全屏模式
                    if (element.requestFullscreen) {
                        element.requestFullscreen()
                    } else if (element.mozRequestFullScreen) {
                        // Firefox
                        element.mozRequestFullScreen()
                    } else if (element.webkitRequestFullscreen) {
                        // Chrome, Safari and Opera
                        element.webkitRequestFullscreen()
                    } else if (element.msRequestFullscreen) {
                        // Internet Explorer and Edge
                        element.msRequestFullscreen()
                    }
                    // document.getElementById('hideBtn').style = 'display:none'
                }
            },
            mounted() {
                // 自动滚动
                this.tableScroll()
                // 获取实时日期
                this.displayDate()
                setInterval(this.displayDate, 1000)
                // 请求数据
                this.getalltask()

                // 初始化web
                this.createWebSocket()
            }
        })
    </script>
</html>
